<script setup lang="ts">
import { ref } from 'vue'
import { NButton, NIcon, NTooltip } from 'naive-ui'
import { Edit } from '@vicons/tabler'
import BaseMessage from './BaseMessage.vue'
import type { Message } from './type'

const props = defineProps<{
  message: Message
}>()

const emit = defineEmits<{
  (e: 'edit', message: Message, newContent: string): void
}>()

const isEditing = ref(false)
const editedContent = ref(props.message.content)

const handleEdit = () => {
  emit('edit', props.message, editedContent.value)
  isEditing.value = false
}
</script>

<template>
  <BaseMessage :message="message" placement="right" type="text" :editable="true">
    <template #header>用户</template>
    <template #actions>
      <NTooltip
        trigger="hover"
        v-if="!isEditing"
        size="small"
        :show-arrow="false"
        raw
        :duration="10"
      >
        <template #trigger>
          <NButton size="tiny" text @click="isEditing = true">
            <template #icon><NIcon :component="Edit" /></template>
          </NButton>
        </template>
        <span class="text-black text-xs items-end flex p-2 rounded-xl bg-gray-100"
          >编辑并重新回答</span
        >
      </NTooltip>
      <NButton v-if="isEditing" size="tiny" text @click="handleEdit"> 保存 </NButton>
    </template>
  </BaseMessage>
</template>
